<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="带看服务包"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <img class="banner" src="../../assets/orderbanner02.png" alt="" />
    <div class="card">
      <div class="words">经纪人带看服务</div>
      <div class="member">
        <div>
          <div class="tiptitle">带看次数</div>
        </div>
        <div>
          <div class="newpri">
            ￥<span>{{ agentcont.total }}</span
            >元/次
          </div>
          <div class="oldpri">原价{{ agentcont.originalPrice }}元</div>
        </div>
        <div></div>
        <van-checkbox checked-color="#45b7cb" v-model="checkedpri" />
      </div>
      <div class="showwords">
        <div>风里来雨里去经纪人很辛苦-按劳所得</div>
        <div>大数据报告一般带看5-7次能找到您满意的房源</div>
        <div>(该优惠价截至2022年12月31日，价格会根据平台政策随时调整)</div>
      </div>
    </div>
    <div class="cut"></div>
    <div class="btnpart">
      <div class="cheak">
        <van-checkbox
          shape="square"
          icon-size="14px"
          checked-color="#45b7cb"
          v-model="checked"
          style="margin-right: 5px"
        />
        <span
          >我已阅读并同意<span @click="toagreement" class="xy"
            >《不动产交易服务代购买协议》</span
          ></span
        >
      </div>
      <div class="btn">
        <div class="pay">
          <span>￥</span>
          <span>{{ money }}</span>
          <!-- <span>元</span> -->
        </div>
        <div>
          <button @click="call">咨询客服</button>
          <button @click="topay">立即购买</button>
        </div>
      </div>
      <div class="safe"></div>
    </div>

    <van-overlay z-index="200" :show="showsuccess">
      <div class="wrapper">
        <div class="paysuccess">
          <van-icon size="70px" name="checked" />
          <div>
            交纳成功，<span>{{ time }}</span
            >秒后自动跳转
          </div>
          <button @click="back">跳转</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getPay, createPayorder, paySign } from "../../apis/buy.js";
// import { getPay} from "../../apis/buy.js";
export default {
  data() {
    return {
      checked: false,
      checkedpri: false,
      wxChannel: null,
      agentcont: {},
      money: 0,
      serveId: null,
      showsuccess: false,
      time: 3,
      timer: "",
    };
  },
  created() {
    if (window.plus) {
      setTimeout(this.plusReady, 0);
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
    getPay({ cate: "3" }).then((res) => {
      this.agentcont = res.result.list[2];
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    topay() {
      // this.$router.push("/RechargeIntegral")
      let _this = this;
      if (this.checked) {
        if (this.money != 0) {
          createPayorder({ serveId: this.agentcont.serveId }).then((res) => {
            console.log("createPayorder",res)
            if (res.code == 201) {
              let orderid = res.result.orderId;
              paySign({ type: "1", orderId: orderid }).then((rep) => {
                console.log("paySign",rep)
                if (rep.code == 201) {
                  plus.payment.request(
                    _this.wxChannel,
                    JSON.stringify(rep.result),
                    function (result) {
                      console.log(result);
                      _this.showsuccess = true;
                      _this.timer = setInterval(() => {
                        _this.time--;
                        if (_this.time == 0) {
                          _this.$router.go(-1);
                          clearInterval(_this.timer);
                        }
                      }, 1000);
                    },
                    function () {
                      _this.$toast("支付失败");
                    }
                  );
                } else {
                  _this.$toast("下单失败");
                }
              });
            } else {
              _this.$toast("下单失败");
            }
          });
        } else {
          this.$toast("请选择服务");
        }
      } else {
        this.$toast("请阅读并勾选下方协议");
      }
    },
    call() {
      window.location.href = "tel:400-000-7173";
    },
    toagreement() {
      this.$router.push({ path: "/buyagreement" });
    },
    plusReady() {
      let _this = this;
      plus.payment.getChannels((channels) => {
        for (let i in channels) {
          if (channels[i].id == "wxpay") {
            _this.wxChannel = channels[i];
          }
        }
      });
    },
  },
  beforeUpdate() {
    if (this.checkedpri) {
      this.money = this.agentcont.total;
    } else if (!this.checkedpri) {
      this.money = 0;
    }
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
}
.cut {
  height: 100px;
}
.card {
  margin: 0 15px;
  background-color: #f2fafb;
  padding: 15px 10px;
  .member {
    font-size: 12px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-radius: 10px;
    .tiptitle {
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
    }
    .oldpri {
      text-decoration: line-through;
      font-size: 11px;
      display: inline-block;
      background-color: #f2f2f2;
      color: #999;
      padding: 1px 2px;
    }
    .newpri {
      text-align: center;
      font-size: 12px;
      color: #d43b33;
      span {
        font-size: 22px;
        font-weight: bold;
      }
    }
    .point {
      color: #d43b33;
      margin-right: 2px;
    }
    .can {
      color: #999;
    }
  }
  .words {
    margin-bottom: 10px;
    font-size: 17px;
    color: #333;
    font-weight: bold;
  }
  .showwords {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    div{
      margin-bottom: 5px;
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 5px 0 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    height: 20px;
    display: flex;
    // justify-content: center;
    align-items: center;
    margin: 0 15px;
    font-size: 11px;
    color: #333;
    .xy {
      color: #45b7cb;
    }
  }
  .btn {
    padding: 5px;
    // margin: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pay {
      color: #d43b33;
      font-size: 16px;
      span:nth-child(2) {
        font-weight: bold;
        font-size: 28px;
      }
      span:nth-child(1) {
        // font-weight: bold;
        font-size: 16px;
        margin-left: 5px;
      }
    }
    button {
      border: none;
      border-radius: 20px;
      height: 40px;
      line-height: 40px;
      width: 22vw;
      min-width: 70px;
      color: #fff;
      font-size: 14px;
      &:first-child {
        background-color: #fff;
        color: #999;
        border: 1px solid #999;
        margin-right: 2vw;
      }
      &:last-child {
        background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      }
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.paysuccess {
  padding: 25px 40px;
  background-color: #fff;
  text-align: center;
  color: #45b7cb;
  > div {
    margin-top: 10px;
    color: #333;
    span {
      color: #45b7cb;
    }
  }
  button {
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #45b7cb;
    padding: 3px 15px;
    border-radius: 15px;
  }
}
</style>
